<template>
  <div class="box">
  	<!-- 头部 -->
  	<div class="page-top">
  		<div class="top-1">
  			<ul>
  				<li><a href="">游戏交易平台 设为首页 | </a></li>
  				<li><a href="">热血三国 | </a></li>
  				<li><a href="">软件下载 | </a></li>
  				<li><a href="">游戏资讯攻略 | </a></li>
  				<li><a href="">收藏本站 | </a></li>
  				<li><a href="">关于我们 </a></li>
  			</ul>
  		</div>
  		<!-- 顶部的图标 -->
  		<div class="top-img">
  			<div class="logo ">
  				<img src="@/assets/img/logo.gif" >
  			</div>
  			<div class="logo-right">
  				<ul>
  					<li v-for='(list,index) in navlist' :key='index'>
              <img :src="list.imgSrc" alt=""></img>
  						<p><a href="">{{list.imgTitle}}</a> </p>
  					</li>
  				</ul>
  			</div>
  	    </div>
  	</div>
  </div>
</template>

<script>
  export default{
    name:'Game',
    data (){
      return {
        navlist:[
          {
            imgSrc:'@/assets/img/c-2.gif',
            imgTitle:'玩小游戏'
          },
          {
            imgSrc:'@/assets/img/c-1.gif',
            imgTitle:'玩小游戏'
          },
          {
            imgSrc:'@/assets/img/c-1.gif',
            imgTitle:'玩小游戏'
          },
          {
            imgSrc:'@/assets/img/c-1.gif',
            imgTitle:'玩小游戏'
          },
          {
            imgSrc:'@/assets/img/c-1.gif',
            imgTitle:'玩小游戏'
          },
          {
            imgSrc:'@/assets/img/c-1.gif',
            imgTitle:'玩小游戏'
          },
          {
            imgSrc:'@/assets/img/c-1.gif',
            imgTitle:'玩小游戏'
          },
          {
            imgSrc:'@/assets/img/c-1.gif',
            imgTitle:'玩小游戏'
          },
          {
            imgSrc:'@/assets/img/c-1.gif',
            imgTitle:'玩小游戏'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  *{
  	margin:0px;
  	padding:0px;
  }
  .box{
  	width:1000px;
  	height: auto;
  	margin:0px auto;
  }
  .box a{
  	color: blue;
  }
  /* 头部所有 */
  .page-top{
  	height: 40px;
  	line-height: 40px;
  	text-align: right;

  }
  .page-top ul li{
  	display: inline-block;
  	list-style: none;
  }
  .page-top ul li a{
  	text-decoration: none;
  }
  .page-top  .top-1{
  	height: 40px ;
  	margin: 10px auto ;
  	background-color: #D9FFFF;
  	line-height: 40px;
  	text-align: right;
  }

  .top-img{
  	overflow: hidden;
  	float: right;
  	border: 1px solid skyblue;
  }
  .top-img .logo{
  	float: left;
  }
  .top-img .logo-right{
  	float:right;
  }
  .top-img .logo-right ul li{
  	display: inline-block;
  	padding:0px 10px;
  	list-style: none;
  	width: 70px;
  	height: 30px;
  }
  .top-img .logo-right ul li a{
  	text-decoration: none;
  	font-size: 13.5px;
  }
  /* 头部结束 */
  /* 会员信息开始 */
  .top-2{
  	height: 345px;
  	text-align: left;
  	border: 1px solid white;

  }
  /* 信息 */
  .top-2 .xinxi {
  	height: 200px;
  	width: 200px;
  	float: left;
  	border: 1px solid skyblue;
  	margin-top: 10px;
  }
  .top-2.xinxi-1{

  	width: 30px;
  	height: 200px;
  	line-height: 200px;

  }
  .top-2.xinxi-1.xinxi-2 {
  	width: 170px;
  	height: 200px;
  	float: left;
  	border: 1px solid white;

  }
  .xinxi-1 .xinxi-2 {
  	float: right;
  	text-align: center;

  }
  /* 广告 */
  .top-2 .guangGao{
  	width: 530px;
  	height:200px;
  	float: left;
  	line-height: 200px;
  	text-align: center;
  	border:1px solid skyblue ;
  	margin-right: 20px  ;
  	margin-left: 30px;
  	margin-top: 10px;
  }
  /* 公告 */
  .top-2 .GongGao{
  	width: 200px;
  	height: 200px;
  	float: right;
  	text-align: center;
  	border: 1px solid skyblue;
  	margin-top: 10px;

  }
  .GongGao .gaoShi{
  	height: 30px;
  	width: 200px;
  	border-bottom: 1px solid skyblue;
  	line-height: 30px;
  	color: red;
  }
  .GongGao .gaoShi a{
  	text-decoration: none;
  	font-size: 10px;
  }
  .GongGao .lianJie{
  	font-size: 10.5px;
  	margin-right: 10px;
  }
  .GongGao .lianJie ul li {
  	list-style: none;
  }
  /*  客服、交易、充值、帮助、特色 */
  .top-3{
  	height: 165px;
  	float: left;
  	border: 1px solid white;
  }
  /* 客服 */
  .top-3 .kefu {
  	width: 185px;
  	height: 150px;
  	border: 1px solid skyblue;
  	margin-right: 15.5px;
  	float: left;
  	font-size: 10px;
  }
  /* 交易 */
  .top-3  .jiaoyi{
  	width: 185px;
  	height: 150px;
  	border: 1px solid skyblue;
  	float: left;

  }
  .top-3 .jiaoyi .jiaoyi-1{
  	width: 185px;
  	height: 35px;
  	background-color:#FFEEDD;
  	text-align: center;
  	line-height: 35px;
  }
  .jiaoyi .jiaoyi-2{
  	text-align: center;
  	margin-top: 30px;
  }
  /* 充值 */
  .top-3  .chzhi{
  	width: 185px;
  	height: 150px;
  	border: 1px solid skyblue;
  	float: left;
  	margin-left: 15.5px;
  }
  .top-3 .chzhi .chzhi-1{
  	width: 185px;
  	height: 35px;
  	background-color:#FFEEDD;
  	text-align: center;
  	line-height: 35px;
  }
  .chzhi .chzhi-2{
  	text-align: center;
  	margin-top: 20px;
  }
  .chzhi .chzhi-2 a{
  	text-decoration: none;
  }
  /* 帮助 */
  .top-3  .bangzhu{
  	width: 185px;
  	height: 150px;
  	border: 1px solid skyblue;
  	float: left;
  	margin-left: 15.5px;
  }
  .top-3 .bangzhu  .bangzhu-1{
  	width: 185px;
  	height: 35px;
  	background-color:#FFEEDD;
  	text-align: center;
  	line-height: 35px;
  }
  .top-3 .bangzhu  .bangzhu-2{
  	margin-top: 20px ;
  	margin-left: 20px;
  	font-size: 14px;
  }
  .bangzhu-2 ul li{
  	list-style: none;
  }
  .bangzhu-2 ul li a{
  	text-decoration: none;
  	color: #000000;
  }
  /* 特色*/
  .top-3  .tese{
  	width: 185px;
  	height: 150px;
  	border: 1px solid skyblue;
  	float: left;
  	margin-left: 16.5px;
  }
  .top-3 .tese  .tese-1{
  	width: 185px;
  	height: 35px;
  	background-color:#FFEEDD;
  	text-align: center;
  	line-height: 35px;
  }
  .top-3 .tese  .tese-2{
  	font-size: 14px;
  	margin-top: 20px ;
  	margin-left: 12px;
  }
  /* /* 图片、购买、资讯 */
  .ZhongJian{
  		height: 160px;
  		float: left;
  		border: 1px solid white;
  }
  /* 图片 */
  .ZhongJian .tupian{
  	width: 185px;
  	height: 150px;
  	border: 1px solid skyblue;
  	margin-right: 15.5px;
  	float: left;
  }
  .ZhongJian .tupian img{
  	width: 175px;
  	height: 63px;
  	margin: 5px;
  }
  /* 购买 */
  .ZhongJian .goumai{
  	width: 390px;
  	height: 150px;
  	border: 1px solid skyblue;
  	margin-right: 10px;
  	float: left;
  }
  .ZhongJian .goumai .goumai-1{
  	height: 30px;
  	background-color: #D9FFFF;
  	font-size: 13px;
  	line-height: 30px;
  }
  .goumai .goumai-2 .gou-2-1{
  	width: 185px;
  	height: 120px;
  	margin-right: 10px;
  	float: left;
  	font-size: 10px;
  	text-align: center;
  	margin-top: 10px;
  }
  .goumai .goumai-2 .gou-2-2{
  	width: 185px;
  	height: 120px;
  	margin-right: 10px;
  	float: right;
  	font-size: 10px;
  	text-align: center;
  	margin-top: 10px;
  }
  .goumai-2 img{
  	height:60px;
  	width: 140px;
  	margin-left: 20px;
  }
  /* 资讯 */
  .ZhongJian .zixun{
  	width: 386.5px;
  	height: 150px;
  	border: 1px solid skyblue;
  	margin-left: 5px;
  	float: left;
  }
  .ZhongJian .zixun .zixun-1{
  	height: 30px;
  	background-color: #D9FFFF;
  	font-size: 13px;
  	line-height: 30px;
  }
  .ZhongJian .zixun .zixun-2{
  	font-size: 15px;
  	margin-left: 5px;
  }
  /* <!-- 提现、网游 --> */
  .under{
  	height: 100px;
  	border: 1px solid white;
  	float: left;
  	margin-bottom: 10px;
  }
  .under .tixian{
  	width: 185px;
  	height: 60px;
  	margin-right: 10px;
  	float: left;
  	text-align: center;

  	border: 1px solid skyblue;
  }
  .under .tixian img{
  	width: 180px;
  	height: 58px;
  	text-align: center;
  	line-height: 58.5px;
  }
  .under .wangyou{
  	width: 794.012px;
  	height: 60px;
  	margin-left: 5px;
  	float: left;
  	border: 1px solid skyblue;
  	text-align: center;
  }
  .under a{
  	font-size: 16px;
  	margin-left: 5px;
  }
  /* zuihoude  */
  .under .lantiao{
  	height: 25px;
  	margin-top: 75px;
  	border: 1px solid skyblue;
  	background-color: #D9FFFF;
  	line-height: 25px;
  }
  .under .lantiao a{
  	text-decoration: none;
  	font-size: 10px;
  }
   .last{
  	height: 300px;
  	border: 1px solid white;
  	margin-top: 10px;
  }
  .last .end {
  	height: 200px;
  	border: 1px solid skyblue;

  }
   .last .end .end-1{
  	width: 200px;
  	height: 200px;
  	text-align: center;
  	border: 1px solid skyblueq;
  	margin-top: 10px;
  	float: left;
  }
  .last .end .end-1 a{
  	font-size: 15px;
  }
   .last .end .end-2{
  	width: 150px;
  	height: 200px;
  	text-align: center;
  	border: 1px solid skyblueq;
  	margin-top: 10px;
  	float: left;
  	margin-left: 10px;

  }
  .last .end .end-2 a{
  	font-size: 15px;
  }
  .last .end .end-2 img{
  	width: 35px;
  	height: 16px;
  	margin-left: 15px;
  }
   .last .end .end-3{
  	width: 300px;
  	height: 200px;
  	text-align: center;
  	border: 1px solid skyblueq;
  	margin-top: 10px;
  	float: left;
  	margin-left: 10px;
  }
  .last .end .end-3 a{
  	font-size: 15px;
  }
   .last .end .end-4{
  	width: 300px;
  	height: 200px;
  	text-align: center;
  	border: 1px solid skyblueq;
  	margin-top: 10px;
  	float: left;
  	margin-left: 15px;
  }
  .under .zuihou{
  	height: 300px;
  	border: 1px solid white;
  	margin-top: 10px;
  }
  .under .zuihou img{
  	text-align: left;
  	margin-top: 20px;
  }
  .under .zuihou .zuihou-1{
  	width: 853px;
  	height: 300px;
  	float: right;
  	text-align: center;
  	margin-top: 10px;
  	font-size: 15px;
  }
  .under .zuihou .zuihou-1 a{
  	font-size: 15px;
  	text-decoration: none;
  }
</style>
